<template>
  <vue-drawer-layout ref="drawerLayout">
    <!--      左侧菜单区，默认隐藏-->
    <div class="drawer" slot="drawer">
      <div class="text">
        <p class="user">{{ name }}</p>
        <ul class="drawerList">
          <li @click="myfavor()">
            <span style="color: #41b883;font-size: 25px;margin-right: 5px;">★</span>
            我的收藏
          </li>
          <li @click="modifyPassword">
            <img src="../../assets/password.png" width="15px"/>
            修改密码
          </li>
          <li @click="quit">
            <img src="../../assets/exit.png" width="20px"/>
            安全退出
          </li>
        </ul>
      </div>
      <a href="javascript:void(0)" class="close"
         @click="handleToggleDrawer">
        <img src="../../assets/return.png" width="18px"/>&nbsp;返回
      </a>
    </div>

    <div class="content" slot="content" ref="viewBox">
      <Header :title="title" :back="'null'"></Header>
      <div class="section">
        <ul class="list" v-for="(item,index) in wordAttr">

          <!--            非收藏页-->
          <template v-if="!ismyfavor">
            <li v-for=" (word,index) in item">
              <div>
                <div>
                  <span class="words">{{ word.word }}</span>
                  <span class="syllable">[{{ word.pronounce }}]</span>
                </div>
                <p class="chinese">{{ word.description }}</p>
              </div>
              <!--            每个单词的功能-->
              <div class="btngroud">
                <button v-on:click="del(word.id)" class="delbtn">删除</button>
                <button v-on:click="update(word)" class="modifybtn">修改</button>
                <!--/////////////////////////发音////////////////////////////////////////////////////////////-->

                <!--<VueAudio :theUrl="url"/>-->

                <!--<audio src=""></audio>-->
                <!--谷歌的-->
                <span @click="favor(word.id,word.iscollect)" class="favor" style="color: #41b883" v-if="word.iscollect">★</span>
                <span @click="favor(word.id,word.iscollect)" class="favor" v-else>☆</span>
                <img v-on:click="read(word.speech)" src="../../assets/laba.png" alt="小喇叭" width="20px" height="20px"
                     style="float: right;margin-top: 7px">

              </div>
            </li>
          </template>
          <!--          收藏页-->
          <template v-else>
            <li v-for=" (word,index) in item" v-if="word.iscollect">
              <div>
                <div>
                  <span class="words">{{ word.word }}</span>
                  <span class="syllable">[{{ word.pronounce }}]</span>
                </div>
                <p class="chinese">{{ word.description }}</p>
              </div>
              <!--            每个单词的功能-->
              <div class="btngroud">
                <button v-on:click="del(word.id)" class="delbtn">删除</button>
                <button v-on:click="update(word)" class="modifybtn">修改</button>
                <!--/////////////////////////发音////////////////////////////////////////////////////////////-->

                <!--<VueAudio :theUrl="url"/>-->

                <!--<audio src=""></audio>-->
                <!--谷歌的-->
                <!--                <span @click="favor(word.id,word.iscollect)" class="favor" style="color: #41b883" v-if="word.iscollect">★</span>
                                <span @click="favor(word.id,word.iscollect)" class="favor" v-else>☆</span>-->
                <img v-on:click="read(word.speech)" src="../../assets/laba.png" alt="小喇叭" width="20px" height="20px"
                     style="float: right;margin-top: 7px">

              </div>
            </li>
          </template>
        </ul>
        <div class="loadmore" @click="loadmore()">{{load}}</div>
      </div>
      <a href="javascript:void(0)" class="btn" v-if="title=='我的单词本'"
         @click="handleToggleDrawer">
        <img src="../../assets/menu.png" width="20px"/>
      </a>
      <a href="javascript:void(0)" class="btn" v-else
         @click="tobackWords()">
        <img src="../../assets/back.png" width="20px"/>
      </a>
    </div>
  </vue-drawer-layout>
</template>

<script>
import {setCookie, getCookie, delCookie} from '../../assets/js/cookie.js'
import {nemoMD5} from "../../assets/js/md5.js"
import Header from "../header/header"
import VueAudio from "../header/VueAudio.vue"
import qs from "qs";


export default {
  name: 'Words',
  //刷新的reload依赖
  inject: ['reload'],
  components: {
    Header,
    VueAudio  //引入语音组件
  },
  data() {
    return {
      // tts
      // words:'', //绑定输入框的单词
      // url:'http://openapi.youdao.com/ttsapi?q=boss&langType=en&sign=C15A7AA69D3838DF24701C697F754EFD&salt=1544686447285&voice=5&format=mp3&appKey=4d0315a39cca722e',
      // url:'http://dict.youdao.com/dictvoice?audio=boss&format=mp3',
      // url:'http://dict.youdao.com/dictvoice?audio=boss&format=mp3',
      // url:'http://openapi.youdao.com/ttsapi?q=boss&langType=en&sign=C15A7AA69D3838DF24701C697F754EFD&salt=1544686447285&voice=5&format=mp3&appKey=4d0315a39cca722e',
      updWord: {
        id: 0,
        word: '',
        pronounce: '',
        description: ''
      },

      words: [],
      count: 0,
      page: 1,//当前页数
      pagesize:8,//每页显示条数
      num: null,
      name: '',
      title: "我的单词本", //导航标题内容
      ismyfavor: false,
      dom: '',
      wordAttr: [], //将获取到的单词列表存到这个数组
      load: '加载更多',//加载更多提示

      appKey: "4d0315a39cca722e",
      q: '',
      salt: 2,
      miyao: "D2XNf8CGnHtQXMhKNgK7ywTp2I1WdGYs",
      voice: 0,

    }
  },
  methods: {
    // 检查是否登录
    isLogin() {
      let uname = getCookie('userName')
      this.name = uname
      if (uname == "") {
        this.$router.push('/')
        return false;
      }
      return true;
    },
    /**
     * 修改密码的方法
     *
     **/
    modifyPassword: function () {
      this.$router.push({path: "/UpdatePassword"})
    },

    /**
     * 弹出左侧菜单的方法
     *
     **/
    handleToggleDrawer: function () {
      this.$refs.drawerLayout.toggle();
    },

    /**
     * 退出当前程序
     **/
    quit() {
      delCookie('userName')
      delCookie('uid')
      this.$router.push('/')
    },
    /**
     * 获取数据
     *
     **/
    show: function (page) {
      // console.log(page);
      let _this = this;
      this.axios.get('getWordList?size='+this.pagesize+'&page=' + page + '&uid=' + getCookie("uid")).then((res) => {
        let data = res.data;
        _this.words = data.wordAttr;
        _this.count = data.count;
        _this.wordAttr.push(_this.words);
      });
    },

    // -----------------------------------------单词读音----------------------------------------------------------
    read: function (url) {
      let audio = new Audio();//在VUE中使用audio标签
      audio.src = url;//设置audio的src为上面生成的url
      audio.play();//进行播放
    },

    /**
     * 删除当前的单词信息
     *
     **/
    del: function (id) {
      console.log(id)
      this.axios.delete("delWord?id=" + id).then((res) => {
        if (res.data.code === 200) {
          alert(res.data.msg)
          //刷新当前页面
          this.reload();
        } else {
          alert(res.data.msg)
        }
        this.show(1);
      });
    },
    /**
     * 修改单词方法
     *
     **/
    update: function (word) {

      // console.log(word);
      // alert(word);
      this.$router.push({
        /*由于动态路由也是传递params的，所以在 this.$router.push() 方法中
         * path不能和params一起使用，否则params将无效。需要用name来指定页面。
         * */
        name: 'UpdWord',
        params: {
          word: word,
        }
      });
    },
    /**
     * 收藏与取消收藏
     */
    favor(id, isfavor) {
      if (isfavor) {
        //取消收藏
        this.axios.post('delcollect', qs.stringify({
          uid: getCookie('uid'),
          wid: id
        })).then((res) => {
          if (res.data.code === 200) {
            this.reload();
          } else {
            alert(res.data.msg);
          }
        })
      } else {
        //添加收藏
        this.axios.post('collect', qs.stringify({
          uid: getCookie('uid'),
          wid: id
        })).then((res) => {
          if (res.data.code === 200) {
            this.reload();
          } else {
            alert(res.data.msg);
          }
        })
      }
    },
    /**
     * 跳转收藏页面
     */
    myfavor() {
      this.ismyfavor = true;
      this.title = "我的收藏"
      this.$refs.drawerLayout.toggle();
    },
    //当显示我的收藏时，返回事件，返回到我的单词本
    tobackWords() {
      this.ismyfavor = false;
      this.title = "我的单词本"
    },
    //下拉加载更多
    loadmore() {
      if(this.count > this.page*this.pagesize){
        let _this = this;
        if (this.isLogin()) {
          // 设置一个开关来避免重负请求数据
          let sw = true;
          // 如果开关打开则加载数据
          if (sw == true) {
            // 将开关关闭
            sw = false;
            _this.page++;
            _this.show(_this.page)
            if(this.count < this.page*this.pagesize){
              this.load = "没有更多了…"
            }
          }
        }
      }
    }
  },
  created() {
    this.isLogin();
    this.show(1); //默认显示第一页的内容
  }
}
</script>

<style scoped>
.user {
  height: 100px;
  line-height: 100px;
  font-size: 20px;
  font-weight: bold;
}

.section {
  margin-top: 55px;
  margin-bottom: 15px;
}

.list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #ffffff;
  border-radius: 3px;
  margin: 0 10px;
  padding: 12px;
  text-align: left;
  border: 1px #eee solid;
  margin-top: 12px;

}

.content {
  height: 100%;
  overflow: auto;
}

.list li .words {
  font-size: 16px;
  font-weight: bold;
  margin-right: 8px;
}

.list li .syllable {
  font-size: 12px;
  color: #666;
}

.list li .chinese {
  font-size: 12px;
  color: #666;
}

.list li .delbtn {
  border-radius: 20px;
  width: 48px;
  height: 19px;
  line-height: 16px;
  color: #41b883;
  border: 1px #41b883 solid;
  font-size: 10px;
  text-align: center;
  display: inline-block;
}

.list li .modifybtn {
  border-radius: 20px;
  width: 48px;
  height: 19px;
  line-height: 16px;
  color: #ffffff;
  border: 1px #41b883 solid;
  background: #41b883;
  font-size: 10px;
  text-align: center;
  display: inline-block;
}

.list li .favor {
  font-size: 25px;
  margin-left: 40px;
}

.btn {
  position: fixed;
  left: 10px;
  /*top: 0;*/
  top: 12px;
  z-index: 2;
}

.btngroud {
  flex: 0 0 100px;
}

.drawerList li {
  display: flex;
  align-items: center;
  margin-left: 20px;
  line-height: 45px;
}

.drawerList li img {
  margin-right: 10px;
}

button {
  background: none;
}

.close {
  position: fixed;
  bottom: 10px;
  right: 35%;
  color: #41b883;
  text-decoration: none;
  font-size: 14px;
  align-items: center;
  display: flex;
  font-weight: bold;

}

h1, h2 {
  font-weight: normal;
  text-align: center;
}

ul li {
  list-style: none;
}

.drawer {
  height: 100%;
}

.text {
  width: 70%;
  height: 100%;
  background-color: #ffffff;
  box-shadow: 3px 3px 6px 6px #888888;
  font-family: 微软雅黑;
  font-size: 2.1vh;
}

.button {

  display: flex;
  flex-direction: row;

  padding-left: 50%;
  padding-top: 2%;
}

.loadmore {
  padding-top: 20px;
  font-size: 15px;
}

</style>
